<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:a4j="http://richfaces.org/a4j"
	template="/WEB-INF/esquema/plantillaworkflow.xhtml">

	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/esquema/sidebar2.xhtml"/>
	</ui:define>


	<ui:define name="body">
		<style type="text/css">
			.col {
				vertical-align:top;
			}
		</style>
		
		<div align="center">
			<br/>
			<strong>#{messages['presentation.header']}</strong>
			<rich:separator lineType="solid"/>
			<br/>
			<table width="500" border="1" cellpadding="0" cellspacing="0">
				<tr>
					<td>
					<table width="100%" border="0" align="center" cellpadding="0"
						cellspacing="0" bgcolor="#FFFFFF">
						<tr>
							<td width="50" valign="top">
								<h:graphicImage value="/img/int_ayuda.gif" width="45" height="43" />
							</td>
							<td width="500" class="tab">
								<ul style="line-height:normal;">
									<li>#{messages['presentation.instruction1']}</li>
									<li>#{messages['presentation.instruction2']}</li>
									<li>#{messages['presentation.instruction3']}</li>
								</ul>
							</td>
						</tr>
					</table>
					</td>
				</tr>
			</table>
			<br/>
		</div>
		<div align="center">
			<br/>
			<strong>#{messages['introfin.transactiondata']}</strong>
			<rich:separator lineType="solid"/>
			<br/>
			<h:form>
				<h:panelGrid width="100%" columns="2" columnClasses="col,col">
					<h:outputText value="#{messages['intro.partyid']}:" />
					<h:panelGroup>
							<h:panelGroup id="identGroup">
								<h:inputText id="identidadCiudadano" value="#{transactionController.partyNationalIdentity}" required="true"
										readonly="true"
										requiredMessage="Valor requerido"
										validatorMessage="Valor muy corto">
									<f:validateLength minimum="13" />
									<a4j:support event="onblur" />
								</h:inputText>
							</h:panelGroup>
		
							<a4j:commandLink ajaxSingle="true" reRender="identGroup" oncomplete="#{rich:component('selectPartyPanel')}.show()">
								<f:setPropertyActionListener value="#{false}" target="#{selectPropertyHelper.addToList}" />
								<f:setPropertyActionListener value="transactionController.partyId" target="#{selectNaturalPersonExtPartyHelper.partyIdField}"/>
								<f:setPropertyActionListener value="transactionController.partyNationalIdentity" target="#{selectNaturalPersonExtPartyHelper.identityField}"/>
								<f:setPropertyActionListener value="transactionController.partyName" target="#{selectNaturalPersonExtPartyHelper.partyNameField}"/>
								<f:setPropertyActionListener value="#{rich:clientId('identGroup')}, #{rich:clientId('nombreCiudadano')}" target="#{selectNaturalPersonExtPartyHelper.reRenderComponents}"/>
								<h:outputText value="#{messages['intro.search']}" />
							</a4j:commandLink>
							
							<rich:message style="color:Red;" for="identidadCiudadano" />
					</h:panelGroup>
		
					<h:outputText value="#{messages['intro.fullname']}:"/>
					<h:panelGroup>
						<a4j:region renderRegionOnly="true">
							<h:inputText id="nombreCiudadano" value="#{transactionController.partyName}"
									required="true"
									readonly="true"
									requiredMessage="El nombre es requerido"
									validatorMessage="Nombre muy corto"
									style="width:265px;">
								<f:validateLength minimum="3" />
								<a4j:support event="onblur" />
							</h:inputText>
							
							<rich:message style="color:Red;" for="nombreCiudadano" />
						</a4j:region>
					</h:panelGroup>
		
					<h:outputText value="#{messages['intro.cashierscode']}:"/>
					<h:panelGroup>
						<a4j:region renderRegionOnly="true">
							<h:inputText id="cashiersCode" value="#{transactionController.cashiersCode}"
									label="#{messages['intro.cashierscode']}"
									required="true"
									style="width:265px;">
								<a4j:support event="onblur" />
							</h:inputText>
							
							<rich:message style="color:Red;" for="cashiersCode" />
						</a4j:region>
					</h:panelGroup>
					
					<h:outputText value="#{messages['intro.payment']}:"/>
					<h:panelGroup>
						<a4j:region renderRegionOnly="true">
							<h:inputText id="payment" value="#{transactionController.payment}"
									label="#{messages['intro.payment']}"
									required="true"
									requiredMessage="El nombre es requerido"
									validatorMessage="Nombre muy corto"
									style="width:265px;">
								<a4j:support event="onblur" />
							</h:inputText>
							
							<rich:message style="color:Red;" for="payment" />
						</a4j:region>
					</h:panelGroup>
		
					<h:outputText value="#{messages['intro.description']}:" />
					<h:panelGroup>
						<a4j:region renderRegionOnly="true">
							<h:inputTextarea id="descripcion" value="#{transactionController.description}" required="true"
								rows="5" cols="30"
								requiredMessage="Valor requerido"
								validatorMessage="Valor muy corto">
								<f:validateLength minimum="3" />
								<a4j:support event="onblur" />
							</h:inputTextarea>
						
							<rich:message style="color:Red;" for="descripcion" />
						</a4j:region>
					</h:panelGroup>
				</h:panelGrid>
				
				<br/>
				<br/>
			
				<div align="center">
					<strong>#{messages['introfin.attacheddocs']}</strong>
				</div>
				<rich:separator lineType="solid"/>
			
				<h:panelGroup id="tabla">
					<h:panelGroup rendered="#{empty transactionController.attachedFiles}">
						<div align="center">
							<br/>
							<h:outputText value="#{messages['intro2.nodocsattached']}"/>
						</div>
					</h:panelGroup>
					<br />
					<rich:dataTable id="datosTabla" value="#{transactionController.attachedFiles}"
							var="file" rowKeyVar="row" rendered="#{not empty transactionProcess.attachedFiles}">
						<rich:column>
							<f:facet name="header">#{messages['intro2.description']}</f:facet>
							<h:outputText value="#{file.descripcion}"/>
						</rich:column>
		
						<rich:column>
							<f:facet name="header">#{messages['intro2.filename']}</f:facet>
							<h:outputText value="#{file.fileName}"/>
						</rich:column>
		
						<rich:column>
							<a4j:commandLink value="#{messages['intro2.edit']}" onclick="#{rich:component('editPanel')}.show()" reRender="info">
								<f:setPropertyActionListener target="#{transactionController.selectedFile}" value="#{archivo}"/>
								<f:setPropertyActionListener target="#{transactionController.editMode}" value="1"/>
								<f:setPropertyActionListener target="#{transactionController.currentRow}" value="#{row}"/>
							</a4j:commandLink>
							<h:outputText value="  "/>
							<a4j:commandLink value="#{messages['intro2.delete']}" action="#{transactionProcess.deleteSelectedFile}" reRender="tabla">
								<f:setPropertyActionListener target="#{transactionController.currentRow}" value="#{row}"/>
							</a4j:commandLink>
						</rich:column>
					</rich:dataTable>
				</h:panelGroup>
				
				<br />
				<a4j:commandLink value="#{messages['intro2.add']}" action="#{transactionController.newAttachedFile}"
						oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('editPanel')}.show()" reRender="info">
					<f:setPropertyActionListener value="0" target="#{transactionController.editMode}" />
				</a4j:commandLink>
				
				<br/>
				<br/>
				
				<a4j:commandButton value="#{messages['button.ok']}" action="#{transactionProcess.endPresentation}"/>
				#{'  '}
				<a4j:commandButton value="#{messages['button.l8r']}" action="home">
					<s:conversationPropagation type="end"/>
				</a4j:commandButton>
			</h:form>
		</div>
		
		
		<rich:modalPanel id="editPanel" autosized="true">
			<f:facet name="header">
				<h:outputText value="Editar" rendered="#{transactionController.editMode == '1'}"/>
				<h:outputText value="Agregar" rendered="#{transactionController.editMode == '0'}"/>
			</f:facet>
	
			<h:form>
				<h:panelGrid id="info" columns="2">
					<h:outputText value="#{messages['intro2.file']}:"/>
					<h:panelGroup>
						<h:outputText id="nombreArchivo" value="#{transactionController.selectedFile.fileName}"/>
						<br/>
						<rich:fileUpload acceptedTypes="gif,jpg,png,pdf,doc,xls"
								allowFlash="false" autoclear="false" noDuplicate="true"
								maxFilesQuantity="1" immediateUpload="true" clearAllControlLabel="" clearControlLabel=""
								fileUploadListener="#{transactionController.attachFileListener}"
								listHeight="80" listWidth="200" addControlLabel="Seleccionar">
							<a4j:support event="onuploadcomplete" reRender="nombreArchivo"/>
						</rich:fileUpload>
					</h:panelGroup>
					
					<h:outputText value="#{messages['intro2.description']}:"/>
					<h:inputTextarea value="#{transactionController.selectedFile.descripcion}"
							cols="30" rows="5"/>
		
				</h:panelGrid>
				<br />
				<br />
				<a4j:commandButton value="#{messages['button.ok']}" action="#{transactionController.acceptSelectedFile}"
						oncomplete="#{rich:component('editPanel')}.hide()" reRender="tabla"/>
				<a4j:commandButton value="#{messages['button.close']}" oncomplete="#{rich:component('editPanel')}.hide()" />
			</h:form>
		</rich:modalPanel>
		
		<ui:include src="/WEB-INF/includes/selectParty.xhtml" />
	</ui:define>
	
</ui:composition>
